<template>
  <div class="container">
    <div class="p1"  v-show="show1" >
      <img src="@/assets/1.jpg" alt="" >
      <div class="btn-group">
        <div  class="team" @click="to3" >
          <span class="iconfont icon-tuxing"></span>
          <span>Team Introduction</span>
        </div>
        <div class="partner" @click="to2" >
          <span class="iconfont icon-tuxing"></span>
          <span>Cooperative partner</span>
        </div>
      </div>
    </div>

    <div class="p2" v-show="show2" >
      <img
        src="@/assets/2.jpg" alt="" >
      <div class="btn-group">
        <div class="team" @click="to1" >
          <span class="iconfont icon-tuxing"></span>
          <span>Company profile</span>
        </div>
        <div class="partner" @click="to3" >
          <span class="iconfont icon-tuxing"></span>
          <span>Cooperative partner</span>
        </div>
      </div>
    </div>

    <div class="p3" v-show="show3" >
      <img src="@/assets/3.jpg" alt="" >
      <div class="btn-group">
        <div class="team" @click="to2('show3')" >
          <span class="iconfont icon-tuxing"></span>
          <span>Company profile</span>
        </div>
        <div class="partner" @click="to1()" >
          <span class="iconfont icon-tuxing"></span>
          <span>Team Introduction</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
.container {
  background: #fff;
  position: relative;
  user-select: none;
  img {
    width: 100%;
  }
  .btn-group {
    position: absolute;
    width: 100%;
    // margin-left: 5%;
    transform: translate(-50%, -50%);
    top: 80%;
    left: 50%;
    display: flex;
    justify-content: space-evenly;
    .team,
    .partner {
      margin: 0 5%;
      padding: 10px 25px;
      font-size: 18px;
      color: #e44f50;
      text-align: center;
      border: 1px solid #e44f50;
    }
    
  }
  
}
</style>
<script>
// import foot from '@/components/foot'
export default {
   components:{
    },
 data() {
    return {
      show1: true,
      show2: false,
      show3: false,
    };
  },
  methods: {
    to2:function(){
      this.show1= false
      this.show2= true
      this.show3= false
    },
     to3:function(){
      this.show1= false
      this.show2= false
      this.show3= true
    },
     to1:function(){
      this.show1= true
      this.show2= false
      this.show3= false
    }
  },
  created(){
    this.$store.commit("SETTING_HEADER_ACTIVE",3)
  }
};
</script>
